<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3-escook</title>
  <link rel="stylesheet" href="./lib/style.css">
  <style>
    th,
    td {
      border: 1px solid #efefef;
      min-width: 100px;
      text-align: center;
    }
  </style>
  <script type="importmap">
    {
      "imports" : {
        "vue": "./lib/vue-3.4.29.js"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref, computed } from 'vue'

    const app = createApp({
      setup() {
        // 源数据
        const fruits = ref([
          { id: 1, name: '苹果', price: 2, count: 1 },
          { id: 2, name: '香蕉', price: 1.5, count: 2 },
          { id: 3, name: '橘子', price: 1.8, count: 5 },
          { id: 4, name: '柿子', price: 1, count: 3 }
        ])

        // 计算属性：总数量
        const total = computed(() => fruits.value.reduce((acc, item) => acc += item.count, 0))
        // 计算属性：总价格
        const amount = computed(() => fruits.value.reduce((acc, item) => acc += item.price * item.count, 0))

        return {
          fruits,
          total,
          amount
        }
      }
    })

    app.mount('#app')
  </script>
</head>

<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>水果</th>
          <th>单价（元）</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in fruits" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>￥{{ item.price }}</td>
          <td>
            <button @click="item.count--">-</button>
            <span style="padding: 0 10px;">{{ item.count }}</span>
            <button @click="item.count++">+</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4">
            <span>总数量：{{ total }}；</span>
            <span>总价格：{{ amount }}元</span>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>

</html>